<template>
	<div class="user-chat">
		<van-nav-bar
		  title="小智同学"
		  left-arrow
			@click-left="$router.back()"
		/>
		
		<!-- 消息列表 -->
		<van-cell-group class="cell">
		  <van-cell title="单元格"  />
		  <van-cell title="单元格"  />
		</van-cell-group>
		<!-- 消息列表 -->
		
		<!-- 发送消息 -->
		<van-cell-group class="send-message-wrap">
			<van-field v-model="message" placeholder="请输入消息" />
			<van-button size="small" type="info" class="btn">发送</van-button>
		</van-cell-group>
		<!-- 发送消息 -->
	</div>
</template>

<script>
	import io from 'socket.io-client'
	const socket = io('http://ttapi.research.itcast.cn')
	
	socket.on('connect',function() {
		console.log('连接建立成功了')
	})
	// socket.on('event',function(data) {})
	socket.on('disconnect',function() {
		console.log('连接已断开')
	})
	
	export default {
		name:'userChat',
		data() {
			return {
				message: ''
			}
		}
	}
</script>

<style scoped="scoped">
	.send-message-wrap {
		display: flex;
		padding: 0 14px;
		
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.btn {
		width: 60px;
		height: 30px;
	}
	.cell {
		position: fixed;
		left: 0;
		right: 0;
		top: 46px;
		bottom: 44px;
		overflow-y: auto;
	}
</style>
